<template>
  <div>
    <h1>App</h1>
    <button @click="count++">{{ count }}</button>
    <button @click="countPlus++">{{ countPlus }} - {{ countPlusPlus }}</button>
  </div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const count = ref(10);

    // 通过 computed 创建一个计算属性
    const countPlus = computed({
      get() {
        return count.value + 1;
      },

      // countPlus = 10
      //  value 10
      set(value) {
        console.log("set", value);
        // 修改它的依赖项 count
        count.value = value - 1;
      },
    });

    const countPlusPlus = computed(() => {
      return countPlus.value * 2;
    });

    console.log("countPlus", countPlus);

    return {
      count,
      countPlus,
      countPlusPlus,
    };
  },
};
</script>
